#topic-title {
  display: flex;
  border-bottom: var(--border-inner);
  padding: 1rem;
  margin: 0;
  gap: 2.15rem;
  .title-wrapper {
    row-gap: 0.25rem;
  }
  &:before,
  &:after {
    content: unset;
  }
  h1 {
    @include headline-small;

    a {
      color: var(--neutral-10);
    }
  }
  .topic-title-outlet {
    order: -1;
  }
}

.more-topics__container .nav {
  position: relative;
}

.topic-meta-data {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  .post-infos {
    display: contents;
    .reply-to-tab {
      width: 100%;
      order: 10;
      color: var(--neutral-30);
      margin: 0.25rem 0 0 0;
      max-width: unset;

      @include body-small;
      .avatar {
        width: 1rem;
        height: 1rem;
        margin: 0 0.25rem;
      }
      span {
        color: var(--primary-30);
      }
      &:hover {
        span {
          text-decoration: underline;
        }
      }
    }
    .post-info {
      &.post-date {
        order: 2;
      }

      &.edits {
        display: inline-flex;
        order: 3;
        align-self: center;

        .widget-button {
          @include body-small;
          padding: 0;
          height: unset;
          margin-left: 0.5em;
          font-size: var(--font-up-1);

          span {
            display: none;
          }
        }
      }
      @include body-small;
      a {
        color: var(--neutral-30);
      }
    }
  }

  .names {
    display: contents;
    div.customer-flair-wrapper {
      order: 5;
      width: 100%;
      .customer-flair {
        margin: 0;
        height: 1.25rem;
        align-items: center;
        padding: 0 0.5rem;
        border: 0;
        border-radius: var(--rounded-full);
        display: inline-flex;
      }
    }
    span {
      margin: 0;
      color: var(--neutral-50);
      @include body-small;
      &.first {
        a {
          @include label-large;
          color: var(--neutral-10);
        }
        margin-right: 0.5rem;
      }
      &.second {
        @include body-small;
        order: 1;
        a {
          color: var(--neutral-30);
        }
        &:after {
          content: "\00a0·\00a0";
        }
      }
      &.user-title {
        color: var(--neutral-50);
        order: 9;
        width: 100%;
      }
    }
    .svg-icon-title {
      font-size: var(--font-up-1);
    }
  }
}

.small-action {
  border-bottom: var(--border-inner);
  &.topic-post-visited {
    .topic-post-visited-line {
      border: 0;
      padding: 1rem;
      @include body-medium;
      color: var(--neutral-50);
      span.topic-post-visited-message {
        background: none;
        color: inherit;
      }
    }
  }
}

.small-action-custom-message {
  margin-top: 0;
}

.small-action-buttons {
  order: 2;
}

.container.posts {
  .timeline-controls {
    margin-top: 1em;
  }
  & > .row {
    border-right: var(--border-inner);
  }
}

.topic-post {
  border: 0;
  border-bottom: var(--border-inner);

  article.onscreen-post {
    .row {
      padding: 1rem;
      column-gap: 1rem;
      .topic-avatar {
        position: sticky;
        top: calc(
          var(--header-offset) + 1rem
        ) !important; // why is sticky conditional?
        float: unset;
        border: 0;
        padding: 0;
        width: unset;
        margin: 0;
        @include breakpoint(tablet) {
          position: relative;
          top: unset !important;
        }
      }
      .topic-body {
        &.highlighted {
          animation: none;
        }
        flex: 1;
        border: 0;
        width: unset;
        float: unset;
        padding-top: 0;
        .topic-meta-data {
          padding: 0;
        }
        .regular.contents {
          margin-top: 1rem;
        }
        .cooked {
          padding: 0;
          @include body-large;
        }
      }
    }
  }
}

.post-notice {
  padding: 1rem;
  p {
    @include body-medium;
  }
  &:before {
    padding: 0 0.875rem;
  }
  border: 0;
  border-bottom: var(--border-inner);
  &.old {
    color: inherit;
  }
  gap: 1rem;
  max-width: unset;
}

.small-action {
  padding: 1rem;
  border-top: 0;
  gap: 1rem;

  .small-action-buttons {
    button {
      transition: none;
      @include button($style: tertiary);
    }
  }

  .topic-avatar,
  .small-action-desc {
    padding: 0;
    border-top: 0;
  }

  .topic-avatar {
    width: 3rem;
    align-self: unset;
  }

  .small-action-desc {
    display: flex;
    flex-wrap: nowrap;
    .avatar {
      margin: 0;
    }
    .small-action-buttons {
      display: flex;
    }
    @include body-medium;

    color: var(--neutral-30);

    .small-action-contents {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    p {
      padding: 0;
    }
  }
}

.regular {
  .more-topics {
    &__container {
      padding: 0;
      max-width: unset;
    }
    &__list-title {
      @include title-medium;
    }
    &__browse-more {
      padding: 1rem;
      @include body-medium;
      margin: 0;
    }
  }
}

#topic-footer-buttons {
  padding-left: 1rem;
}

.topic-status-info,
.topic-timer-info {
  .topic-timer-heading,
  .slow-mode-heading {
    padding-left: 1rem;
  }
}

.topic-status-info,
.topic-timer-info,
.topic-map.--op {
  border-top-color: var(--primary-very-low);
}

.topic-map.--op,
.topic-map.--bottom {
  padding-left: 1rem;
  padding-right: 1rem;
}

.topic-map.--bottom {
  border-bottom-color: var(--primary-very-low);
}

.topic-map .topic-link {
  padding: 0;
  &:after {
    display: none;
  }
}

.topic-back-button {
  margin-left: 0.85rem;
  .d-icon {
    color: var(--neutral-30);
    padding-top: 0.5rem; // vertical alignment
  }
}

.edit-controls {
  display: flex;
}

// hide the back button when editing the topic title to avoid confusion
.title-wrapper:has(.edit-topic-title) + .topic-title-outlet {
  visibility: hidden;
}

.regular .more-topics__list-title {
  padding-left: 1em;
}

.container.posts #topic-progress-wrapper {
  margin-bottom: 0.5em;

  .topic-admin-menu-button-container + #topic-progress {
    border-radius: var(--rounded-md);
  }

  .topic-admin-menu-button .toggle-admin-menu {
    height: 100%;
    margin-right: 0.25em;
    border-radius: var(--rounded-md);
  }
}

nav.post-controls .actions button.d-hover {
  background: transparent;
}

.double-button {
  border-radius: var(--rounded-full);
  @include hover;

  button.d-hover,
  button:hover {
    &:after {
      display: none; // undoes the global hover effect
    }
  }
}

nav.post-controls
  .actions
  .double-button
  button.button-count
  + .toggle-like.d-hover,
nav.post-controls .actions .double-button:hover button {
  background: transparent; // undoes the very specific core hover effect
  &.d-hover {
    background: transparent;
  }
}

.discourse-reactions-double-button {
  border-radius: var(--rounded-md);
}

.post-menu-area {
  margin-bottom: 0;
}

.embedded-posts.bottom {
  > div {
    margin-bottom: 0;
  }
  .reply .row {
    padding-left: 0.5rem;
  }
}

.embedded-posts.bottom .collapse-up {
  bottom: -5em;
}
